<template>
    <div class="item-history-table">
        <el-row class="search-box">
            <el-button v-authCode="B_0094" type="primary" size="mini" @click="queryDialog = true">查询</el-button>
        </el-row>
        <el-row class="table-content">
            <el-table
                :data="historyData"
                v-table-top="history.currentPage"
                border
                size="mini"
                style="width: 100%"
                height="calc(100vh - 210px)"
                v-loading="loading"
                @sort-change="handleSort"
            >
                <el-table-column prop="entryCode" label="条目编号" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column
                    prop="historyType"
                    label="备份类型"
                    width="120"
                    show-overflow-tooltip
                    :formatter="(row, column) => dict.EntryHistoryType[row.historyType]"
                >
                </el-table-column>
                <el-table-column prop="historyDate" label="备份日期" width="120" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        {{ dateFormat(scope.row.historyDate) }}
                    </template>
                </el-table-column>
                <el-table-column prop="entryName" label="风险说明" show-overflow-tooltip min-width="130"></el-table-column>
                <el-table-column prop="changeNo" label="变动序号" width="120" show-overflow-tooltip> </el-table-column>
                <el-table-column
                    prop="entryType"
                    label="风险类型"
                    width="100"
                    :formatter="(row, column) => Invest.entryType[row.entryType]"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="beginDate" label="生效日期" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.beginDate == '0'">--</span>
                        <span v-else>{{ dateFormat(scope.row.beginDate) }} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="endDate" label="失效日期" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.endDate == '0'">--</span>
                        <span v-else>{{ dateFormat(scope.row.endDate) }} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="优先级" show-overflow-tooltip></el-table-column>
                <el-table-column prop="entryStatusValid" label="状态" width="120" :formatter="formatStatus" show-overflow-tooltip> </el-table-column>
                <el-table-column
                    prop="controlGrade"
                    label="风险等级"
                    width="100"
                    :formatter="(row, column) => dict.ControlGrade[row.controlGrade]"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="riskCalTypes" label="作用范围" width="120" :formatter="formatRiskCalTypes" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="thresholdType1"
                    label="阈值类型1"
                    width="120"
                    :formatter="(row, column) => Invest.ThresholdType[row.thresholdType1]"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="thresholdValue1" label="阈值1" show-overflow-tooltip align="right">
                    <template slot-scope="scope">
                        {{
                            scope.row.thresholdValue1 != undefined
                                ? numberFormat(scope.row.thresholdValue1.replace(/[^0-9]/gi, ''), scope.row.unit) + unitShow(scope.row.unit)
                                : '--'
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="thresholdType2"
                    label="阈值类型2"
                    width="120"
                    :formatter="(row, column) => Invest.ThresholdType[row.thresholdType1]"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="thresholdValue2" label="阈值2" width="100" show-overflow-tooltip align="right">
                    <template slot-scope="scope">
                        {{
                            scope.row.thresholdValue2 != undefined
                                ? numberFormat(scope.row.thresholdValue2.replace(/[^0-9]/gi, ''), scope.row.unit) + unitShow(scope.row.unit)
                                : '--'
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="thresholdType3"
                    label="阈值类型3"
                    width="100"
                    :formatter="(row, column) => Invest.ThresholdType[row.thresholdType1]"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="thresholdValue3" label="阈值3" width="120" show-overflow-tooltip align="right">
                    <template slot-scope="scope">
                        {{
                            scope.row.thresholdValue3 != undefined
                                ? numberFormat(scope.row.thresholdValue3.replace(/[^0-9]/gi, ''), scope.row.unit) + unitShow(scope.row.unit)
                                : '--'
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="compareType"
                    label="比较方向"
                    width="120"
                    :formatter="(row, column) => Invest.CompareDirection[row.compareType]"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="originalAccountId"
                    label="账户层次"
                    :formatter="(row, column) => dict.OriginalAccountType[row.originalAccountId]"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="accountControlType"
                    label="控制类型"
                    :formatter="(row, column) => dict.AccountControlType[row.accountControlType]"
                    width="120"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="accountControlValue" label="控制账户" width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.accountControlValue ? scope.row.accountControlValue.join(',') : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="accountDebarValue" label="排除账户" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.accountDebarValue ? scope.row.accountDebarValue.join(',') : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="accountGroupDebarValue" label="排除账户组" width="120" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.accountGroupDebarValue ? scope.row.accountGroupDebarValue.join(',') : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="modifyDate" label="修改日期" show-overflow-tooltip align="center" width="180" sortable="custon">
                    <template slot-scope="scope">
                        {{ dateFormat(scope.row.modifyDate) }} {{ timeFormat(scope.row.modifyTime) }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="modifyTime" label="修改时间" width="120" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        {{ timeFormat(scope.row.modifyDate) }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="modifyUser" label="修改人" width="100" show-overflow-tooltip> </el-table-column>
                <el-table-column
                    prop="sourceType"
                    label="条目来源"
                    :formatter="(row, column) => dict.SourceType[row.sourceType]"
                    width="120"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="customType" label="自定义分类" :formatter="formatCustomType" width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="entryRoleCode" label="条目角色分类" :formatter="formatEntryRole" min-width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="80">
                    <template slot-scope="scope">
                        <RiskIconButton
                            type="primary"
                            v-authCode="B_0093"
                            icon="el-icon-view"
                            topTitle="查看条目"
                            size="mini"
                            @on-click="addTabs('look', scope.row.entryCode, scope.row.historyNo)"
                        ></RiskIconButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <risk-pagination :paging="history" @page-change="queryHistoryList"></risk-pagination>
            </div>
        </el-row>
        <!-- 查询 -->
        <yh-dialog
            drag
            title="查询条目信息"
            :visible.sync="queryDialog"
            width="430px"
            v-loading="loading"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form label-width="150" size="mini" ref="queryForm" :model="queryForm">
                <el-form-item label="条目编号" prop="entryCode">
                    <el-input style="width: 220px" v-model="queryForm.entryCode"></el-input>
                </el-form-item>
                <el-form-item label="风险说明" prop="entryName">
                    <el-input style="width: 220px" v-model="queryForm.entryName"></el-input>
                </el-form-item>
                <el-form-item label="备份时间" prop="historyDate">
                    <el-date-picker style="width: 220px" v-model="queryForm.historyDate" type="date" value-format="yyyyMMdd" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="备份类型" prop="historyType">
                    <el-select style="width: 220px" v-model="queryForm.historyType" placeholder="请选择">
                        <el-option v-for="(value, key) in historyTypeSelectData" :key="key" :label="key + ' ' + value" :value="key"> </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeQueryDialog"> 取 消 </el-button>
                <el-button size="mini" @click="resetForm"> 重 置 </el-button>
                <el-button size="mini" type="primary" @click="submitQueryForm"> 确 定 </el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import RiskTable from '@/common/components/risk-table.vue';
import Invest from '@/common/dict/invest';
import Index from '@/pages/setting/dict';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import { numberFormat, unitShow, dateFormat, timeFormat } from '@/utils/tools';
import RiskPagination from '@/common/components/risk-pagination.vue';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'ItemHistoryTable',
    components: {
        RiskTable,
        RiskIconButton,
        RiskPagination,
    },
})
export default class ItemHistoryTable extends mixins(RiskEmitter) {
    numberFormat = numberFormat;
    unitShow = unitShow;
    dateFormat = dateFormat;
    timeFormat = timeFormat;
    private historyData: any[] = [];

    private Invest: any = new Invest();
    private dict: any = new Index();
    private EntryRole: any = {};
    private queryDialog: boolean = false;

    private history: pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };

    private queryForm = {
        entryCode: '',
        entryName: '',
        historyDate: '',
        historyNo: '',
        historyType: '',
        sort: '',
        paging: {
            currentPage: 1,
            pageSize: 25,
            total: 0,
        },
    };

    // 备份类型下拉数据
    private historyTypeSelectData: any[] = [];

    // 自定义分类数据
    private customTypeData: any[] = [];

    loading: boolean = false;

    // 排序字段
    sortableObj = {
        modifyDate: 'CONCAT(D_MODIFY_DATE,D_MODIFY_TIME)',
    };

    async mounted() {
        this.queryHistoryList();
        this.historyTypeSelectData = this.dict.EntryHistoryType;
        this.customTypeData = await SGU_CACHE('CustomType', '/dict/list/code/Y_000157', []);
        this.EntryRole = this.dict.EntryRole;
    }

    // 转表格筛选下拉框数据
    objToArr(param) {
        let list = [];
        for (let key in param) {
            list.push({ value: key, label: param[key] });
        }
        return list;
    }

    //   获取条目历史列表
    private queryHistoryList() {
        // if (val) {
        //     this.queryForm.paging.currentPage = val;
        // }
        this.queryForm.paging.currentPage = this.history.currentPage;
        this.queryForm.paging.pageSize = this.history.pageSize;
        this.loading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/entry/history/list', this.queryForm)
                .then((res: any) => {
                    this.historyData = res.list;
                    this.history.total = res.total;
                    this.loading = false;
                    resolve(res.list);
                })
                .catch(e => {
                    reject(e);
                    this.loading = false;
                });
        });
    }

    // 条目角色列转换
    private formatEntryRole(row) {
        let retData = '';
        let value = row.entryRoleCode;
        if (value != null) {
            let entryRoleCodes = value.split(',');
            if (entryRoleCodes.length > 0 && entryRoleCodes.length === 1) {
                retData = this.EntryRole[value];
            } else {
                let name = [];
                for (let i = 0; i < entryRoleCodes.length; i++) {
                    name.push(this.EntryRole[entryRoleCodes[i]]);
                }
                retData = name.join(',');
            }
        }
        return retData || '--';
    }

    // 格式化自定义分类
    formatCustomType(row, column) {
        let obj = this.customTypeData.find(item => item.dictKey == row.customType);
        return obj ? obj.dictKeyName : '--';
    }

    // 条目状态列转换
    private formatStatus(row): string {
        return row.entryStatusValid ? '启用' : '禁用';
    }

    // 作用范围列转换
    private formatRiskCalTypes(row) {
        let show = [];
        for (const item of row.riskCalTypes) {
            show.push(this.dict.RiskCalType[item]);
        }
        return show;
    }

    private closeQueryDialog() {
        this.queryDialog = false;
    }

    // 重置查询表单
    private resetForm() {
        (this.$refs.queryForm as any).resetFields();
    }

    // 确认查询
    private submitQueryForm() {
        this.queryHistoryList()
            .then((res: any) => {
                this.queryDialog = false;
                this.yh_message_success('查询成功');
            })
            .catch(() => {});
    }

    // 回调函数
    addTabs(data: any, entryCode: any, historyNo: string) {
        let datas: any = {};
        datas.type = data;
        datas.entryCode = entryCode;
        datas.historyNo = historyNo;
        this.dispatch('ItemHistory', 'addTables', datas);
    }
    handleSort(column): void {
        let sortType = column.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : '';
        if (sortType) {
            this.queryForm.sort = this.sortableObj[column.prop] + ' ' + sortType;
        } else {
            this.queryForm.sort = '';
        }
        this.history.currentPage = 1;
        this.queryHistoryList();
    }
}
</script>
<style lang="scss" scoped>
.item-history-table {
    padding: 15px;
    .search-box {
        padding: 15px;
        border: 1px solid #d7d7d7;
        margin-bottom: 15px;
    }
    .table-content {
        border: 1px solid #d7d7d7;
    }
}

/deep/ .el-table__empty-text {
    text-align: left;
    margin-left: -200px;
}
</style>
